<script setup>
import {goCommunity,getRouteParams,goHome,goService} from "../../tools/go";
//从页面传参定义返回页面，flag  1首页
var flag = getRouteParams('flag');

const list = [
  {id: 1, name: '电费', img:'./static/img/community/propertyfee/dianfei.png'},
  {id: 2, name: '水费', img:'./static/img/community/propertyfee/shuifei.png'},
  {id: 3, name: '物业费', img:'./static/img/community/propertyfee/wuye.png'},
  {id: 4, name: '停车费', img:'./static/img/community/propertyfee/tingchefei.png'},
  {id: 5, name: '网络服务', img:'./static/img/community/propertyfee/wangliofuwu.png'},
  {id: 6, name: '有线电视', img:'./static/img/community/propertyfee/youxiandianshi.png'},
]
</script>

<template>
  <view class="pay">
    <view class="back">
      <view class="titli">
        <v-icon @click="flag == 1 ? goHome() : goCommunity()" class="icon" icon="mdi-chevron-left"></v-icon>
        <h3>物业缴费</h3>
      </view>
      <view class="bgimg">
        <img src="../../static/img/fwjfbg.png" alt="">
      </view>
      <view class="payment">
        <ul>
          <li  v-for="item in list" :key="item.id">
            <a>
              <img :src="item.img" alt="" :style="{ display: item.img ? 'block' : 'none' }">
              <p>{{item.name}}</p>
            </a>
          </li>
        </ul>
      </view>
      <view></view>
    </view>
  </view>
</template>

<style scoped lang="scss">

@use "../../static/css/main";

.pay {
  .back{
    @include main.useTheme() {
      .payment{
        ul{
          li{
            a{
              img:nth-child(8){
                display: none;
              }
              img{
                width: 40px;
                height: 40px;
                border-radius: 100%;
              }
              width: 110px;
              height: 110px;
              background: main.getVal("two_lv_bg_color");
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
            }
            margin: 5px;
          }
          width: 100%;
          margin: 20px auto;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-template-rows: 1fr;
          justify-items: center;
          gap: 12px;
        }
        width: 100%;
        height: 45vh;
        display: flow-root;
      }
      .bgimg{
        img{
          width: 100%;
          height: 100%;
        }
        width: 100%;
        height: 30vh;
        background: #E07320;
        border: 1px solid #E07320;
        margin-top: -1px;
      }
      .titli {
        h3 {
          text-align: center;
          font-weight: 400;
        }
        .icon {
          position: absolute; /* 将 icon 脱离文档流 */
          left: 10px;
          font-size: 30px;
        }
        position: relative; /* 父容器设置为相对定位 */
        display: flex;
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中 */
        width: 100%;
        height: 8vh;
        background: #ffffff;
      }
      body {
        background: main.getVal("primary_bg_color");
      }
      * {
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
      }
    }
  }
}
</style>